<template>
    <div class="detail">
        <van-nav-bar left-text="返回" left-arrow fixed class="detail-nav" @click-left="back">
            <template #right>
                <div class="nav-btn-bookshelf">+书架</div>
            </template>
        </van-nav-bar>
        <header>
            <div class="book-info">
                <van-row gutter="20">
                    <van-col span="7">
                        <img class="info-coverimg" :src="$store.state.imgbaseUrl+fake.data.coverImg" alt="..">
                    </van-col>
                    <van-col span="17">
                        <div class="info-txt">
                            <div class="title">{{fake.data.title}}</div>
                            <div class="txt">作者：{{fake.data.author}}</div>
                            <div class="txt">类型：{{fake.data.categoryName}}</div>
                            <div class="txt">状态：{{fake.data.update.chapterStatus == "SERIALIZE" ? "连载":"完结"}}</div>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <div class="book-bg" ref="bookbg">1111</div>
        </header>
        <van-row class="detail-service">
            <van-col span="8">
                <div class="service-btn">推荐</div>
            </van-col>
            <van-col span="8">
                <div class="service-btn">分享</div>
            </van-col>
            <van-col span="8">
                <div class="service-btn">报错</div>
            </van-col>
        </van-row>
        <!--  -->
        <section class="detail-desc">
            <aside class="desc-title">简介</aside>
            <aside class="desc-txt">{{fake.data.desc}}</aside>
        </section>
        <!--  -->
        <section class="detail-catalog">
            <aside class="catalog-title">目录</aside>
            <div class="catalog-newinfo" @click="goChapter(bookId)">
                <van-icon name="bars" class="btn" />
                <div class="newinfo-center">
                    <div class="time">最近更新 ：{{formatDayTime(fake.data.update.time)}}</div>
                    <div>{{fake.data.update.chapterName}}</div>
                </div>
                <van-icon name="arrow" class="btn" />
            </div>
        </section>
        <!--  -->
        <section class="detail-comment">
            <aside class="comment-title">
                <span>书友评论</span>
                <van-icon name="edit" />
            </aside>
            <ol class="comment-list">
                <li class="comment-item">
                    <div class="account-info">
                        <img :src="headerImg" alt="..">
                        <div class="center">
                            <div>1566826*******</div>
                            <div>2011.12-12 11:12 AM</div>
                        </div>
                        <div class="btn">
                            <van-icon name="good-job-o" class="icon-btn" />
                            21
                        </div>
                    </div>
                    <div class="item-txt">小白文小白白白白白白白白文？？？？</div>
                </li>
                <li class="comment-item">
                    <div class="account-info">
                        <img :src="headerImg" alt="..">
                        <div class="center">
                            <div>1566826*******</div>
                            <div>2011.12-12 11:12 AM</div>
                        </div>
                        <div class="btn">
                            <van-icon name="good-job-o" class="icon-btn" />
                            21
                        </div>
                    </div>
                    <div class="item-txt">小白文小白白白白白白白白文？？？？</div>
                </li>
                <li class="comment-item">
                    <div class="account-info">
                        <img :src="headerImg" alt="..">
                        <div class="center">
                            <div>1566826*******</div>
                            <div>2011.12-12 11:12 AM</div>
                        </div>
                        <div class="btn">
                            <van-icon name="good-job-o" class="icon-btn" />
                            21
                        </div>
                    </div>
                    <div class="item-txt">小白文小白白白白白白白白文？？？？</div>
                </li>
                <li class="comment-item">
                    <div class="account-info">
                        <img :src="headerImg" alt="..">
                        <div class="center">
                            <div>1566826*******</div>
                            <div>2011.12-12 11:12 AM</div>
                        </div>
                        <div class="btn">
                            <van-icon name="good-job-o" class="icon-btn" />
                            21
                        </div>
                    </div>
                    <div class="item-txt">小白文小白白白白白白白白文？？？？</div>
                </li>
            </ol>
        </section>
        <SwiperList :data="fake.data.recommend" />
    </div>
</template>

<script>
    import '../assets/scss/Detail.scss';
    import SwiperList from "../components/SwiperList.vue";


    export default {
        name: 'Detail',
        components: {
            SwiperList
        },
        data() {
            return {
                boobookId: 0,
                headerImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1429175118,2649084526&fm=11&gp=0.jpg',
                fake: {
                    "data": {
                        "author": "唐家三少",
                        "bookId": 48772,
                        "categoryName": "玄幻小说",
                        "chapterNum": 1429,
                        "coverImg": "",
                        "desc": " 一万年后，冰化了。　　斗罗联邦科考队在极北之地科考时发现了一个有着金银双色花纹的蛋，用仪器探察之后，发现里面居然有生命体征，赶忙将其带回研究所进行孵化。蛋孵化出来了，可孵出来的却是一个婴儿，和人类一模一样的婴儿，一个蛋生的孩子。 ",
                        "recommend": [{
                                "author": "辰东",
                                "bookId": 74585,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "SERIALIZE",
                                "coverImg": "/file/group1/book/23515770-5434-446c-9323-6924df55c018.jpg",
                                "desc": " 在破败中崛起，在寂灭中复苏。 沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角…… ",
                                "title": "圣墟",
                                "word": "715万字"
                            },
                            {
                                "author": "唐家三少",
                                "bookId": 35707,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "END",
                                "coverImg": "/file/group1/book/d61fdbfe-58b3-4c52-9129-27c7bc5f9c0c.jpg",
                                "desc": " 唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大6。这里没有魔法，没有斗气，没有武术，却有神奇的武魂。这里的每个人，在自己六岁的时候，都会在武魂殿中令武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活。而其中一些特别出色的武魂却可以用来修炼并进行战斗，这个职业，是斗罗大6上最为强大也是最荣耀的职业——魂师!当唐门暗器来到斗罗大6，当唐三武魂觉醒，他能否在这片武魂的世界再铸唐门的辉煌？他能否成为这个世界的主宰：神? ",
                                "title": "斗罗大陆",
                                "word": "322万字"
                            },
                            {
                                "author": "辰东",
                                "bookId": 38658,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "SERIALIZE",
                                "coverImg": "/file/group1/book/da6283fc-18a3-40d0-a654-c28de1ab2b10.jpg",
                                "desc": " 在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角…… ",
                                "title": "圣墟（圣虚）",
                                "word": "744万字"
                            },
                            {
                                "author": "天蚕土豆",
                                "bookId": 34798,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "SERIALIZE",
                                "coverImg": "/file/group1/book/aaed46d4-1499-4628-94a4-af9189002293.jpg",
                                "desc": " 天地为炉，万物为铜，阴阳为炭，造化为工。气运之争，蟒雀吞龙。究竟是蟒雀为尊，还是圣龙崛起，凌驾众生？这是气掌乾坤的世界，磅礴宏伟，一气可搬山，可倒海，可翻天，可掌阴阳乾坤。世间源气分九品，三品称玄，六品成天，九品号圣。吾有一口玄黄气，可吞天地日月… ",
                                "title": "元尊",
                                "word": "601万字"
                            },
                            {
                                "author": "厌笔萧生",
                                "bookId": 32019,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "SERIALIZE",
                                "coverImg": "/file/group1/book/c574f9a8-a2ce-4f0e-964c-f5d18beef59f.jpg",
                                "desc": " 千万年前，李七夜栽下一株翠竹。八百万年前，李七夜养了一条鲤鱼。五百万年前，李七夜收养一个小女孩。今天，李七夜一觉醒来，翠竹修练成神灵，鲤鱼化作金龙，小女孩成为九界女帝。这是一个养成的故事，一个不死的人族小子养成了妖神、养成了仙兽、养成了女帝的故事。请关注作者的公众号“萧府军团”。 ",
                                "title": "帝霸",
                                "word": "1988万字"
                            },
                            {
                                "author": "爱潜水的乌贼",
                                "bookId": 44228,
                                "categoryName": "玄幻小说",
                                "chapterStatus": "SERIALIZE",
                                "coverImg": "/file/group1/book/b9205a00-7a96-46e4-9f1a-14858091a2d2.jpg",
                                "desc": " 蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我从诡秘中醒来，睁眼看见这个世界：　　枪械，大炮，巨舰，飞空艇，差分机；魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，神秘从未远离，这是一段“愚者”的传说。 ",
                                "title": "诡秘之主",
                                "word": "552万字"
                            }
                        ],
                        "title": "斗罗大陆4终极斗罗（斗罗大陆IV终极斗罗）",
                        "update": {
                            "chapterId": 1330470363444715522,
                            "chapterName": "第一千四百三十章 斗罗联邦的失败攻击",
                            "chapterStatus": "SERIALIZE",
                            "time": 1606035708000
                        },
                        "word": "974万字"
                    },
                    "result": {
                        "code": 0,
                        "msg": "操作成功！"
                    }
                },
                data: {},
            }
        },
        created() {
            this.bookId = this.$route.params.bookid;
            this.getData(this.bookId);
        },
        methods: {
            // 改变背景
            init() {

                let els = this.$refs;
                let el = this.$refs.bookbg;
                console.log(els);
                console.log(el);

                // 
                // background - image: url();
                // background - position: center;
                // background - repeat: no - repeat;
                // background - size: cover;
                el.style.backgroundImage = `url("${this.$store.state.imgbaseUrl+this.fake.data.coverImg}")`;

            },
            back() {
                this.$router.go(-1);
            },
            formatDayTime(val) {
                if (val) {
                    let date = new Date(val)
                    let Y = date.getFullYear();
                    let M = date.getMonth() + 1;
                    let D = date.getDate();

                    if (M < 10) {
                        M = '0' + M;
                    }
                    if (D < 10) {
                        D = '0' + D;
                    }

                    return Y + '-' + M + '-' + D;
                } else {
                    return '';
                }
            },

            // 获取数据
            getData(bookId) {
                this.axios({
                    method: "GET",
                    url: "/app/open/api/book/getDetail",
                    params: {
                        bookId
                    }
                }).then(result => {
                    console.log(result);
                    if (result.data.result.code == 0) {
                        this.fake = result.data;
                        this.init();

                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 跳转到商品详情页面
            //查看商品详情页面
            goChapter(bookid) {
                console.log('goChapter');
                this.$router.push({
                    name: 'Chapter',
                    params: {
                        bookid
                    }
                });
            },


        },
        // 
        watch: {
            $route() {
                this.boobookId = this.$route.params.bookid;
                this.getData(this.boobookId);
            }
        },
    }
</script>